<template>
  <div class="newMap">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>地图找房</span>
      <span class="return" @click="back()">&lt;</span>
    </header>
    <main>
      <div class="header">
        <div class="check">
          <input v-model="search" placeholder="请输入您要搜索的城市" />
          <button @click="onSearch()">搜索</button>
        </div>
        <baidu-map
          class="map"
          :center="{ lng: cityInfo.longitude, lat: cityInfo.latitude }"
          :zoom="8"
          :scroll-wheel-zoom="true"
        >
          <bm-map-type
            :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
            anchor="BMAP_ANCHOR_TOP_LEFT"
          ></bm-map-type>

          <!-- 自定义覆盖物 ==> 可以遍历覆盖物  -->
          <bm-overlay
            :labelStyle="{ color: 'red', fontSize: '12px' }"
            title="Hover me"
            v-for="(item, idx) in data"
            :key="idx"
          >
            <!-- 文字 -->
            <bm-label
              :content="item.name"
              :position="{ lng: item.longitude, lat: item.latitude }"
              :labelStyle="{ color: 'red', fontSize: '12px' }"
              title="Hover me"
              @click="getCity(item)"
            />
            <!-- 圈 -->
            <bm-circle
              :center="{ lng: item.longitude, lat: item.latitude }"
              :radius="circlePath.radius"
              stroke-color="blue"
              :stroke-opacity="0.5"
              :stroke-weight="2"
              @lineupdate="updateCirclePath"
            ></bm-circle>
          </bm-overlay>
        </baidu-map>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import { log } from "util";
export default {
  name: "newMap",
  data() {
    return {
      data: [],
      search: "",
      //地图默认的中心坐标
      cityInfo: {
        longitude: 116.404,
        latitude: 39.915
      },
      circlePath: {
        center: {
          lng: 116.404,
          lat: 39.915
        },
        radius: 10000
      }
    };
  },
  created() {},
  methods: {
    //点击返回上一级
    back() {
      this.$router.push(`/newhouse`);
    },

    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter(); //更新圆心
      this.circlePath.radius = e.target.getRadius(); //更新半径
    },
    getCity(item) {
      console.log(item);
    },
    //点击搜索
    async onSearch() {
      //调用搜索城市接口 ==> 将输入框内的城市传递到后端
      const res = await axios.get("/api/changeCity", {
        params: { cityName: this.search }
      });
      //将子级城市数据赋值到data中
      this.data = res.data.area;
      //将输入城市数据复制给cityInfo
      this.cityInfo = res.data.data;
    },
    
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body,
html,
.newMap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.newMap header {
  width: 100%;
  height: 60px;
  background-color: #2997fb;
  /* display: flex;
    align-items: center;
    justify-content: space-around; */
  text-align: center;
  line-height: 60px;
}

.newMap header span {
  color: white;
  float: right;
  margin-right: 60px;
}

.newMap header .logo {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}

.newMap header .return {
  float: left;
  margin-left: 30px;
}

.newMap main {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.newMap main .check{
    width: 100%;
    height: 30px;
    margin-top: 10px;
}

.newMap main .check input{
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-left: 20px;
    font-size: 15px;
}

.newMap main .check button{
    width: 70px;
    background-color: deepskyblue;
    color: white;
    border: none;
    height: 100%;
    margin-left: 30px;
    border-radius: 6px;
}

.newMap main .map {
  width: 100%;
  height: 546px;
  margin-top: 20px;
}
</style>